<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 用车记录详情 -->
    <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-spin :spinning="loading">
        <!-- 用车申请与车辆调度情况 -->
        <a-card :bordered="false">
          <title-name title="用车申请与车辆调度情况"></title-name>
          <custom-form :formList="formList" :form="form" editModel="V">
            <!-- 人员 -->
            <template #usePersonId>
              <a-tag
                class="mb12"
                v-for="person in form.usePersonId"
                :key="person.userId"
                :closable="false"
                color="#108ee9"
                >{{ person.name }}</a-tag
              >
            </template>
          </custom-form>
        </a-card>
        <!-- 实际出车情况 -->
        <a-card :bordered="false">
          <title-name title="实际出车情况"></title-name>
          <a-table
            bordered
            rowKey="id"
            :columns="columns"
            :data-source="(form.carApplication && form.carApplication.carDispatchRecords) || []"
            :pagination="false"
          >
            <!-- 评价明细 -->
            <template slot="action" slot-scope="text, record">
              <span v-if="record.score"
                >{{ record.score
                }}<a
                  class="ml12"
                  @click="
                    detailId = record.id
                    visible = true
                  "
                  >评价明细</a
                ></span
              >
              <span v-else>—</span>
            </template>
            <!-- 状态 -->
            <template slot="travelStatus" slot-scope="text">
              <status-display :statusCode="text" :statusMap="statusMap"></status-display>
            </template>
          </a-table>
        </a-card>
      </a-spin>
      <!-- 页脚操作栏 -->
      <div class="btn_box page-btn-right-top">
        <a-button type="primary" @click="handleActiveClose">关闭</a-button>
      </div>
    </a-form-model>
    <!-- 评价明细 -->
    <DialogEvalueInfo :visible.sync="visible" :id="detailId" />
  </base-breadcrumb>
</template>

<script>
import { carApplicationRecord } from '@/api/office/vehicle/config' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import StatusDisplay from '@/components/StatusDisplay'
import DialogEvalueInfo from './components/DialogEvalueInfo' // 评价明细

export default {
  extends: new BaseEditPage(),
  components: {
    StatusDisplay,
    DialogEvalueInfo,
  },
  data() {
    return {
      loading: false, // loding
      visible: false, // 评价明细显隐控件
      detailId: '', // 评价明细ID
      statusMap: {
        0: {
          label: '未开始',
          color: '#00A854',
        },
        1: {
          label: '进行中',
          color: '#ff9900',
        },
        2: {
          label: '已归队',
          color: '#999',
        },
      }, // 状态枚举
      columns: [
        {
          title: '序号',
          width: 80,
          dataIndex: 'index',
          customRender() {
            return arguments[2] + 1
          },
        },
        {
          title: '车牌号',
          ellipsis: true,
          dataIndex: 'carInfo.unitName',
        },
        {
          title: '随车司机',
          ellipsis: true,
          dataIndex: 'carInfo.driverName',
        },
        {
          title: '状态',
          dataIndex: 'travelStatus',
          align: 'center',
          scopedSlots: { customRender: 'travelStatus' },
        },
        {
          title: '实际归队时间',
          ellipsis: true,
          dataIndex: 'actualTime',
        },
        {
          title: '评价得分',
          dataIndex: 'action',
          width: '200px',
          scopedSlots: { customRender: 'action' },
        },
      ],
      form: {
        usePersonId: [],
        list: [],
      }, // 表单
    }
  },
  mounted() {
    this.loading = true
    carApplicationRecord
      .detail({ id: this.id })
      .then((res) => {
        this.loading = false
        // 设置往返时间
        if (res.data.goTime && res.data.comeTime) {
          res.data.time = [res.data.goTime, res.data.comeTime]
        }
        // 格式化人员
        if (res.data.usePersonId?.length > 0) {
          res.data.usePersonId = res.data.usePersonId?.split(',')?.map((item, index) => ({
            userId: item,
            name: res.data.usePersonNames?.split(';')[index],
          }))
        } else {
          res.data.usePersonId = []
        }
        this.form = res.data
      })
      .catch(() => {
        this.loading = false
      })
  },
  computed: {
    // 表单列表
    formList() {
      return [
        {
          keyName: 'unitName',
          label: '申请单位',
        },
        {
          keyName: 'departmentName',
          label: '申请部门',
        },
        {
          keyName: 'personName',
          label: '申请人',
        },
        {
          keyName: 'phone',
          label: '通知电话',
        },
        {
          keyName: 'address',
          label: '目的地',
        },
        {
          keyName: 'time',
          label: '往返时间',
          customRender() {
            return arguments[1].goTime && arguments[1].comeTime
              ? arguments[1].goTime + '至' + arguments[1].comeTime
              : '无'
          },
        },
        {
          keyName: 'requirement',
          label: '车型要求',
        },
        {
          keyName: 'usePersonId',
          label: '用车人员',
          slot: true,
          span: 24,
        },
        {
          keyName: 'subjectMatter',
          label: '事由',
          span: 24,
        },
      ]
    },
  },
}
</script>